<template>
  <scroll-view class="container" scroll-y>
    <!-- 功能入口网格 -->
    <view class="function-grid">
      <view class="grid-row">
        <view class="grid-item" @click="navigateTo('resumeList')">
          <text class="item-title">我的简历</text>
        </view>
        <view class="grid-item" @click="navigateTo('editResume')">
          <text class="item-title">智能简历生成</text>
        </view>
      </view>
      <view class="grid-row">
        <view class="grid-item" @click="navigateTo('interviewList')">
          <text class="item-title">简历测评</text>
        </view>
        <view class="grid-item" @click="navigateTo('mockInterview')">
          <text class="item-title">智能面试</text>
        </view>

      </view>
    </view>
    <!-- 新增优秀简历大模块 -->
    <!-- 优秀简历模块 -->
    <view class="excellent-resume-section">
      <text class="section-title">优秀简历</text>
      <view class="template-container">
        <view class="template-box" v-for="(item, index) in resumeTemplates" :key="index">
          <view class="avatar-container">
            <!-- <image class="avatar" src="/static/user-avatar.png" mode="aspectFill"></image> -->
            <image class="avatar" :src="item.gender === '男' ? '/static/male-avatar.png' : '/static/female-avatar.png'"
              mode="aspectFill"></image>
          </view>

          <view class="info-container">
            <view class="top-row">
              <text>{{ item.gender }}</text>
              <text>{{ item.age }}岁</text>
              <text>{{ item.education }}</text>
              <text>{{ item.workYears }}年</text>
              <text>期望薪资 {{ item.salary }}万</text>
            </view>
            <view class="bottom-row">
              <text>{{ item.schoolPeriod }}</text>
              <text>{{ item.university }}</text>
              <text>{{ item.position }}</text>
            </view>

          </view>
        </view>
      </view>
    </view>
    <view v-if="isLoading" class="loading-text">加载中...</view>
    <!-- <view v-if="!isLoading && resumeTemplates.length > 0" class="no-more-text">没有更多数据了</view> -->
  </scroll-view>

</template>

<script setup lang="ts">

import { ref } from 'vue'
import { onReachBottom,onLoad } from '@dcloudio/uni-app'

const pageNum = ref(1)
const isLoading = ref(false)
const pageSize = ref(10)


const resumeTemplates = ref([{
  gender: '男',
  age: 28,
  education: '硕士',
  workYears: 5,
  salary: 20,
  schoolPeriod: '2015年9月-2018年6月',
  university: '清华大学',
  position: '高级前端工程师'
}])
// 加载更多数据
const loadMore = async () => {
  if (isLoading.value ) return
 
  isLoading.value = true//标记为正在加载
  try {
    // 模拟API请求
    // const newData = await mockFetchData(pageNum.value)
    const newData = await getGoodResumeListAPI(pageNum.value, pageSize.value )
    if (newData.length === 0) {
      uni.showToast({ icon: 'none', title: '没有更多数据了' })
      return
    }
    // const newData = await mockFetchData(pagination.value.currentPage)
    resumeTemplates.value = [...resumeTemplates.value, ...newData]
    pageNum.value++
    // pagination.value.currentPage++
  } finally {
    isLoading.value = false//加载完成
  }
}

// 修改mockFetchData生成不同性别数据
const getGoodResumeListAPI = (page: number) => {
  return new Promise(resolve => {
    setTimeout(() => {
      const newData = new Array(5).fill(null).map((_, index) => ({
        // 每2条数据生成一个女性简历（示例逻辑，可根据需要调整）
        gender: index % 2 === 0 ? '男' : '女', 
        age: 28 + index,
        education: '硕士',
        workYears: 5,
        salary: 20 + page,
        schoolPeriod: '2015年9月-2018年6月',
        university: '清华大学',
        position: `高级前端工程师-第${page}页-${index + 1}号`
      }))
      resolve(newData)
    }, 1000)
  })
}

const navigateTo = (type: string) => {
  const routes: Record<string, string> = {
    resumeList: '../../pagesInterview/MyResumeList/MyResumeList',
    editResume: '../../pagesInterview/resume/resume',
    interviewList: '../../pagesInterview/resumeAnalysis/resumeAnalysis',
    mockInterview: '../../pagesInterview/chooseResume/chooseResume'
  }
  console.log(routes[type])
  const url = routes[type]
  uni.navigateTo({
    url:url
  })
}

// 上拉加载更多
onReachBottom(() => {
  loadMore()
})
onLoad(() => {
  loadMore() // 页面加载时先加载第一页
})
</script>

<style lang="scss" scoped>
// 新增滚动容器样式
.scroll-view {
  height: 100vh;
  overflow-y: auto; // 允许垂直滚动
}
.container {
  height: 100vh;
  padding: 30rpx;
  box-sizing: border-box;
  background: linear-gradient(135deg, #e9eafc 0%, #f3f6fd 100%);
  // overflow: hidden;
}
.excellent-resume-section {
  padding-bottom: 40rpx; // 添加底部内边距
}
.function-grid {
  .grid-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .grid-item {
    width: 330rpx;
    height: 250rpx;
    background: #f8f8f8;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-shadow: 0 8rpx 24rpx rgba(80, 120, 255, 0.10), 0 1.5rpx 4rpx rgba(0, 0, 0, 0.04);
    border: 1.5rpx solid #f0f2fa;
    
    &:active {
      // 
      background: #f3f6fd;
      transform: scale(0.97);
      box-shadow: 0 2rpx 8rpx rgba(80, 120, 255, 0.08);
    }
    
    // 修改此处：新增紫色渐变样式
    .item-title {
      font-size: 36rpx;
      font-weight: 600;
      color: transparent;  /* 关键：文字颜色设为透明 */
      background-image: linear-gradient(135deg,#bd85f9 0%, #b984e8 100%);  /* 紫色渐变 */
      -webkit-background-clip: text;  /* 背景裁剪到文字（兼容iOS） */
      background-clip: text;  /* 标准属性 */
    }
  }

     // 新增优秀简历模块样式
     .excellent-resume-section {
       margin-top: 40rpx;
       padding: 30rpx;
       background: #fff;
       border-radius: 16rpx;
  
  
       .section-title {
         font-size: 36rpx;
  
         color: #444;
         margin-bottom: 30rpx;
       }
     }
 
 }
 .excellent-resume-section {

   display: flex;
   flex-direction: column;
   gap: 30rpx;
   padding: 20rpx 0;


   .template-container {
     display: flex;
     flex-direction: column;
     gap: 30rpx;
     padding: 20rpx 0;

     .template-box {
       height: 180rpx;
       background: #fff;
       border-radius: 16rpx;
       padding: 20rpx;
       margin: 0 10rpx;
       display: flex;
       align-items: center;
       box-shadow: 0 8rpx 24rpx rgba(80, 120, 255, 0.10), 0 1.5rpx 4rpx rgba(0,0,0,0.04);
       border: 1.5rpx solid #e3e8ff;
       transition: box-shadow 0.3s, transform 0.2s;

       .template-title {
         font-size: 34rpx;
         color: #333;
         font-weight: 500;
       }

       &:active {
         transform: translateY(2rpx);
         box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
       }
             .info-column {
               display: flex;
               flex-direction: column;
               gap: 15rpx;
      
               .info-row {
                 display: flex;
                 align-items: center;
      
                 .info-label {
                   font-size: 28rpx;
                   color: #666;
                   margin-right: 10rpx;
                 }
      
                 .info-value {
                   font-size: 30rpx;
                   color: #333;
                   font-weight: 500;
                 }
               }
             }
               .avatar-container {
                 width: 20%;
                 display: flex;
                 justify-content: center;
                 align-items: center;
  
                 .avatar {
                   width: 80rpx;
                   height: 80rpx;
                   border-radius: 50%;
                 }
               }
  
               .info-container {
                 width: 80%;
                 padding-left: 20rpx;
  
                 .top-row,
                 .bottom-row {
                   display: flex;
                   flex-wrap: wrap;
                   align-items: center;
                   gap: 10rpx;
                   font-size: 24rpx;
                 }
  
                 .bottom-row {
                   margin-top: 10rpx;
                   color: #666;
                 }
               }
   

     }
   }}
     .loading-text {
       text-align: center;
       padding: 20rpx;
       color: #999;
       }
       // 添加新样式
       .no-more-text {
         text-align: center;
         padding: 20rpx;
         color: #999;
         font-size: 24rpx;
       }
</style>
